<!doctype html>
<html>

<head>
    <meta charset="UTF-8">
    <title>发表</title>
    <style>
        <!--body 页边距 -->
        body{margin: 0px}
        /*a内无修饰*/
        a{text-decoration:none}
        html{
            /*height: 100%;*/
            margin: 0;
        }
        body{
            /*height: 100%;*/
            margin: 0px;
            background-color: #f4fdfc;  }

        #container{
            /*height: 100%;*/
            /*min-height: 100%;*/
        }
        .banner {
            z-index:999;
            width:100%;
            height:70px;
            top:0;
            left:0;
            position: fixed;
            overflow: hidden;
            border-bottom: 1px solid rgba(30,35,42,.06);
            box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
            background-clip: content-box;
            background-color: white;
            filter:alpha(Opacity=50);
            opacity: 0.95;
        }
        #logo {
            margin-top: 11px;
            margin-left: 42px;
            width: 115px;
            height: 46px;

        }
        .searchDiv{
            position: absolute;
            top: 15px;
            left: 182px;
            height: 35px;
            width: 224px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
        }
        .searchDiv:hover{
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #00e6d0;
            color: #00e6d0;

        }
        #search {
            float: left;
            margin-top: 1.4px;
            width: 185px;
            height: 30px;
            border: 0;
            background-color: transparent;
            font: 13px 微软雅黑;
        }
        #btnLeft{
            margin-left: 30px;
            width: 255px;
            position: absolute;
            right: 12.6%;
            top: 20px;
        }
        #searchicon{
            background: no-repeat;
            background-image: url("img/搜索.png");
            background-size: 25px 25px;
            float: right;
            margin-top: 3.5px;
            width: 28px;
            height: 28px;
        }
        #searchicon:hover{
            background-image: url("img/搜索hover.png");
        }
        #settingIcon{
            background-image: url("img/设置.png");
            background-size: 25px 25px;
            margin-top: 5px;
            float: right;
            width: 25px;
            height: 25px;
        }
        #settingIcon:hover{
            background-image: url("img/设置focus.png");
        }
        #settingList{
            background:no-repeat;
            background-image:url("img/下拉框.png") ;
            background-size: 155px 120px;
            filter:alpha(Opacity=50);
            opacity: 0.95;
            position: fixed;
            top: 40px;
            right: 11.8%;
            overflow: hidden;
            z-index: 99999;
            width: 155px;
            height: 120px;
            display: none;
        }
        #accountSetting, #changePersonalSetting, #logout{
            list-style: none;
            font: 13px 微软雅黑;
        }
        #accountSetting:hover, #changePersonalSetting:hover, #logout:hover{
            font: 13px 微软雅黑;
        }
        #accountSetting{
            margin-top: 10px;
        }
        #changePersonalSetting{
            margin-top: 35px;
        }
        #logout{
            margin-top: 10px;
        }
        #hpBtn{
            margin-right: 7px;
            width: 100px;
            height: 35px;
            border: none;
            background-color: #93e3e0;
            font: normal 15px 微软雅黑 ;
            color: #ffffff;
            float: right;
        }
        #hpBtn:hover{
            box-shadow:0px 0 5px #00e6d0;
            background-color: #00e6d0;
        }
        #ppBtn{
            margin-right: 7px;
            float: right;
            width: 100px;
            height: 35px;
            border: none;
            background-color: #93e3e0;
            font: normal 15px 微软雅黑 ;
            color: #ffffff;
        }
        #ppBtn:hover{
            box-shadow:0px 0 5px #00e6d0;
            background-color: #00e6d0;
        }
        /*页脚*/
        footer{
            width: 100%;
            height: 60px;
            clear: both;
            padding-top: 20px;
            padding-bottom: 0;
        }
        #footer{
            text-align: center;
            background-color: white;
            height: 40px;
            width: 100%;
            margin-top: 20px;
            overflow: hidden;
            box-shadow: 0 1px 3px 0 rgba(0,34,77,.05);
            background-clip: content-box;
        }
        #footText{
            height: 20px;
            margin: 5px auto;
        }


        #publish{
            width: 100px;
            height: 28px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            background-color: white;
            font: normal 15px 微软雅黑 ;
            color: #666666;

        }
        #save{
            margin-right: 7px;
            width: 100px;
            height: 28px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border: 1px solid #999999;
            background-color: white;
            font: normal 15px 微软雅黑 ;
            color: #666666;
        }
        .publishBtnDiv{
            width:800px;
            height:100px;
            margin:0 auto;
            /*padding-top: 10px;*/
            top:60px;
            position: relative;
            overflow: hidden;
            background: transparent;
            border:none;
            background-clip: content-box;
        }
        /*发布按钮样式：长宽固定（200×28），按钮在框中右浮*/
        #publish{
            margin-top: 5px;
            width: 100px;
            height: 28px;
            -webkit-border-radius:3px;
            -webkit-appearance: none;
            border-radius: 3px;
            border:none;
            background-color: #00e6d0;
            font: normal 15px 微软雅黑 ;
            color: #ffffff;
            float:right;

        }

        /*标题输入栏样式：长宽固定（800×60），居中*/
        #publishTitle{
            text-indent:25px;
            letter-spacing:5px;
            width: 800px;
            height: 60px;
            font:normal 22px 微软雅黑;
            border:0;
            background-color: aliceblue;
        }
        /*文本编辑栏（插件）外框样式：长宽固定（800×500），居中*/
        .bannerPublish{
            width:800px;
            height:auto;
            margin:15px auto;
            position:relative;
            overflow:hidden;
            /*background: #fff;*/
            /*border-top: 1px solid rgba(30,35,42,.06);*/
            /*border-bottom: 1px solid rgba(30,35,42,.06);*/
            /*border-left: 1px solid rgba(30,35,42,.06);*/
            /*border-right: 1px solid rgba(30,35,42,.06);*/
            /*box-shadow: 0 5px 5px 5px rgba(0,34,77,.05);*/
            /*background-clip: content-box;*/
            z-index: 1;
        }
        #selectBlock{
            height:30px;
            width:150px;
            float: right;

        }
        select {
            float: right;
            /*Chrome和Firefox里面的边框是不一样的，所以复写了一下*/
            border: solid 1px #000;
            width: 60px;
            /*很关键：将默认的select选择框样式清除*/
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;

            /*在选择框的最右侧中间显示小箭头图片*/
            background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;


            /*为下拉小箭头留出一点位置，避免被文字覆盖*/
            padding-right: 14px;
            padding-left: 5px;
        }


        /*清除ie的默认选择框样式清除，隐藏下拉箭头*/
        select::-ms-expand { display: none; }

    </style>


	<script type="text/javascript" src="third-party/jquery.min.js"></script>
	<script type="text/javascript" src="third-party/template.min.js"></script>
	<script type="text/javascript" charset="utf-8"
	src="js/umeditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="js/umeditor.min.js"></script>
	<script type="text/javascript" src="lang/zh-cn/zh-cn.js"></script>
	   <link href="themes/default/css/umeditor.css" type="text/css"
	rel="stylesheet">
	<script type="text/javascript" src="js/publish.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("#settingList").mouseleave(function(){
                $("#settingList").hide();
            });
        });
        function showList(){
            $("#settingList").show();
        }
    </script>
</head>

<script type="text/javascript">
    $(window).bind("load", function() {
        var footerHeight = 0;
        var footerTop = 0;
        positionFooter();
        function positionFooter() {
            // 获取页脚的高度
            footerHeight = $("#footer").height();
            // 获取页脚的高度
            /*
             scrollTop() 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离
             */
            footerTop = ($(window).scrollTop()+$(window).height()-footerHeight)+"px";
            //如果页面内容高度小于屏幕高度，div#footer将绝对定位到屏幕底部，否则div#footer保留它的正常静态定位
            if(($(document.body).height()+footerHeight) < $(window).height()) {
                $("#footer").css({ position: "absolute",left:"0" }).stop().css({top:footerTop});
            }
        }
        $(window).scroll(positionFooter).resize(positionFooter);
    });
</script>

<!--页头块-->
<div id="container">
    <div class="banner">
        <img src="img/logologin.png" id="logo"/>
        <!--  
        <div class="searchDiv">
            <input type="text" name="keyword" id="search" placeholder=" 请输入您要搜索的关键字">
            <a onclick="" id="searchicon"></a>
        </div>
        -->
        <div id="btnLeft">
           <a  onmouseover="showList()"> <div id="settingIcon"></div></a>
           <input type="button" name="homepage" id="hpBtn" value="个人中心"
				onclick="location='per_page.html'"> <input type="button"
				name="homepage" id="ppBtn" value="首页"
				onclick="location='home_page.html'">
        </div>
    </div>
    <div id="settingList">
        <ul style="padding-left: 10px">
            <li id="changePersonalSetting">
                <a href="edit_self.html" >编辑个人资料</a>
            </li>
            <li id="accountSetting">
                <a href="change_pwd.html">更改密码</a>
            </li>
            <li id="logout">
                <a onclick="zhuxiao()">退出</a>
            </li>
        </ul>
    </div>
<br />

<!--发表按钮、保存按钮-->
<div class="publishBtnDiv" style="margin:0 auto;">
    <br/>

    <form action="" method="get"id="selectBlock">
        <label style="font:normal 18px 微软雅黑;">选择板块</label>
        <select name="select"style="height: 27px;font-size: 15px;margin-left: 10px" id="select">
            <option value="0">吃</option>
            <option value="1">喝</option>
            <option value="2">玩</option>
            <option value="3">乐</option>
        </select>
        <input type="button" name="publish" id="publish" value="发表" onclick="publishPost()">
    </form>
    <br/>
</div>
<br /><br />

<!--请输入标题-->
<div style="margin:0 auto; text-align:center;">
    <input   type="text" name="title" id="publishTitle" placeholder="请输入文章标题" style="width: 50%;height: 60px; font-size: 22px; border:0; background-color: aliceblue;">
</div>

<!--编辑栏-->
	<div style="margin: 30px; margin-left: 210px">
		<!--style给定宽度可以影响编辑器的最终宽度-->
		<script type="text/plain" id="myEditor" style="width: 800px;">
        </script>
	</div>
   
</div>


<!--页脚部分-->
<footer>
    <div id="footer">
        <div id="footText">
            <img src="img/giggleIcon.png" style="width: 20px;height: 20px;margin-bottom: -6px"   >
            <em style="font: 13px 微软雅黑;color: #999999;">giggle</em>
            <a href="https://www.baidu.com/" style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">关于我们</a>
            <em style="font: 13px 微软雅黑;color: #999999;margin-left: 15px">© 2017 Zealers 版权所有</em>
        </div>
    </div>
</footer>
<!--页脚部分结束-->

	<script type="text/javascript">
		//实例化编辑器
		var um = UM.getEditor('myEditor');
	</script>
</body>
</html>
